<template>


    <div class="container">
        <table width="100%" cellpadding="0" cellspacing="0" border="1">
            <tr>
                <td>序号</td>
                <td>昵称</td>
                <td>username</td>
            </tr>

            <tr v-for="(user, index ) in userList">
                <td>{{ index }}</td>
                <td>{{ user.nickname }}</td>
                <td>{{ user.username }}</td>
            </tr>

        </table>


        <button @click="counter++">点我+1 counter:{{ counter }}</button>

    </div>

</template>

<script setup lang="ts" name='Hero'>
import {
    ref, onBeforeMount,
    onMounted,
    onBeforeUpdate,
    onUpdated,
    onBeforeUnmount,
    onUnmounted
} from 'vue';

//声明周期函数

const counter = ref(0)


onBeforeMount(function () {
    console.log("onBeforeMount----");
})


onMounted(function () {
    console.log("onMounted----");
})

onBeforeUpdate(function () {
    console.log("onBeforeUpdate----");
})


onUpdated(function () {
    console.log("onUpdated----");
})

onBeforeUnmount(function () {
    console.log("onBeforeUnmount----");
})

onUnmounted(function () {
    console.log("onUnmounted----");
})




interface User {
    nickname: string;
    username: string;
}




let userList = ref<User[]>([])


function loadTable() {
    console.log("setup。。。。。");

    //模拟从后台获取数据
    userList.value.push({ nickname: '超级管理员', username: 'admin' })
    userList.value.push({ nickname: '部门管理员', username: 'dpadmin' })
}


loadTable()


</script>

<style scoped>
.container {

    width: 100%;
    min-height: 80px;
    /* line-height: 80px; */
    margin: 10px;
    background-color: cadetblue;


}
</style>